<template>
  <div class="tags">
    <div v-for="(tag,index) in tags" :key="index">
     <router-link class="link" :to="tag.link"><span :class="tag.fonticon" class="iconfont"></span>{{tag.name}}</router-link>
    </div>
    <div>
      <slot></slot>
    </div>
  </div>

</template>

<script>
export default {
  name: "ArticleTags",
  props:['tags']
}
</script>

<style scoped>
.tags{
  display: flex;
  justify-content: space-around;
}
.tags >div{
  margin: 5px;
}
a{
  color: #1abc9c!important;
  border:none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color:transparent;
  text-decoration: none!important;
}
span{
  font-size: 1.2rem!important;
}
.router-link-active{
   color: yellow!important;
}


</style>